<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="../jquery-1.10.2.js"></script>
<script src="../jquery.tmpl.js"></script>
<script src='../knockout-2.3.0.js'></script>

</head>
<body>
<div id="cartEditor">
    <table width="100%">
        <thead>
            <tr>
                <th width="25%">Category</th>
                <th width="25%">Product</th>
                <th width="15%" class='price'>Price</th>
                <th width="10%" class='quantity'>Quantity</th>
                <th width="15%" class='price'>Subtotal</th>
                <th width="10%"></th>
            </tr>
        </thead>
        <tbody data-bind='template: {name: "cartRowTemplate", foreach: lines}'>
        </tbody>
    </table>
    <p class="grandTotal">
        Total value: <span data-bind="text: formatCurrency(grandTotal())"></span>
    </p>
    <button data-bind="click: addLine">
        Add product</button>
    <button data-bind="click: save">
        Submit order</button>
</div>
<script>
var sampleProductCategories=[{name:'class1',products:[{name:'pro1',price:10},{name:'pro2',price:20}]},
{name:'class2',products:[{name:'pro3',price:10},{name:'pro4',price:20}]}];
</script>

<script type="text/html" id="cartRowTemplate">
   <tr>
        <td><select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'></select></td>
        <td><select data-bind='visible: category, options: category() ? category().products : null, optionsText: "name", optionsCaption: "Select...", value: product'></select></td>
        <td class='price'><span data-bind='text: product() ? formatCurrency(product().price) : ""'></span></td>
        <td class='quantity'><input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"'/></td>
        <td class='price'><span data-bind='visible: product, text: formatCurrency(subtotal())'></span></td>
        <td><a href="#" data-bind='click: function() { cartViewModel.removeLine($data) }'>Remove</a></td>
    </tr>
</script>
		
	<script>
function formatCurrency(value) { return "$" + value.toFixed(2); }

var cartLine = function () {
    this.category = ko.observable();
    this.product = ko.observable();
    this.quantity = ko.observable(1);
    this.subtotal = ko.dependentObservable(function () {
        return this.product() ? this.product().price * parseInt("0" + this.quantity(), 10) : 0;
    } .bind(this));

    // Whenever the category changes, reset the product selection
    this.category.subscribe(function () { this.product(undefined); } .bind(this));
};

var cart = function () {
    // Stores an array of lines, and from these, can work out the grandTotal
    this.lines = ko.observableArray([new cartLine()]);   // Put one line in by default    
    this.grandTotal = ko.dependentObservable(function () {
        var total = 0;
        for (var i = 0; i < this.lines().length; i++)
            total += this.lines()[i].subtotal();
        return total;
    } .bind(this));
        
    // Operations
    this.addLine = function () { this.lines.push(new cartLine()) };
    this.removeLine = function (line) { this.lines.remove(line) };

    this.save = function () {
        var dataToSave = $.map(this.lines(), function (line) {
            return line.product() ? { productName: line.product().name, quantity: line.quantity()} : undefined
        });

        alert("Could now send this to server: " + JSON.stringify(dataToSave));
    };
};

var cartViewModel = new cart();

ko.applyBindings(cartViewModel, document.getElementById("cartEditor"));
	</script>
</body>
</html>